<%- include('header') %>

<div class="inner cover">
    <div class="row" style="margin-bottom:40px;">
        <div class="breadcrumbs">
            <div class="container">
                <h1 class="pull-left">Your Balance</h1>
                <h1 class="pull-right"><%= Number(balance)/1000000000000000000 %> &nbsp<img src="/img/ethereum.svg" class="img-responsive" alt="user" style="width: 30px;float:right;margin-top:3px; margin-left: 5px;"></h1>
            </div>
        </div>
    </div>
    <div class = "row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="panel panel-profile no-bg">
                <div class="panel-heading">
                    <h2 class="panel-title heading-sm pull-left">
                        Your Profile
                    </h2>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <table class="table">
                            <tr>
                                <td><strong>Username</strong></td>
                                <td><%= user.username %></td>
                            </tr>
                            <tr>
                                <td><strong>Email</strong></td>
                                <td><%= user.email %></td>
                            </tr>
                                <tr>
                                <td><strong>SUID</strong></td>
                                <td><%= user.suid %></td>
                            </tr>
                        </tr>
                        <tr>
                            <td><strong>Account</strong></td>
                            <td><%= user.account %></td>
                        </tr>
                        </table>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="padding: 40px">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="row" style="border-bottom: 1px solid #fff; margin-bottom: 20px">
                <h3 class="pull-left">Question activity</h3>
            </div>
            <div class="row" style="text-align: left">
                <div class="row" style="padding-left: 20px"><h4 class="pull-left">Questions you asked</h4></div>
                <div class="row" style="padding-left: 40px">
                    <ul>
                        <% if(questions.length == 0){ %>
                            <li>you haven't asked questions yet</li>
                        <% }else{ %>
                            <% questions.forEach(function(question){ %>
                            <li><a href="/piazza/<%= question._id %>"><%= question.title %></a></li>
                            <% }) %>
                        <% } %>
                    </ul>
                </div>
            </div>
            <div class="row" style="text-align: left">
                <div class="row" style="padding-left: 20px"><h4 class="pull-left">Questions you answered</h4></div>
                <div class="row" style="padding-left: 40px">
                    <ul>
                        <% if(answers.length == 0){ %>
                            <li>you haven't answered questions yet</li>
                        <% }else{ %>
                            <% answers.forEach(function(answer){ %>
                                <li><a href="/piazza/<%= answer.questionId._id %>"><%= answer.questionId.title %></a></li>
                            <% }) %>
                        <% } %>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('footer') %>